<script setup lang="ts">
import { taskStore } from "../../store/modules/task";
import dayjs from "dayjs";
import { ref, watch } from "vue";
import { reTaskadd } from '../../api/tasks/index';
import userLayOutSettingStore from '@/store/modules/setting';
let taskState = taskStore();
let showDialog = taskState.dialogFlag;

export interface TaskForm {
  id: number;
  title: string;
  content: string;
  taskTime: any;
  estimatedDuration: number;
  type: any;
  completed: number;
}

// 监听对话框关闭事件
const handleDialogClose = () => {
  taskState.closeDialog();
  location.reload()
};
 const taskTypeOptions = [
  { label: "学习" },
  { label: "运动" },
  { label: "工作" },
  { label: "娱乐" },
  { label: "自定义" },
];

let taskForm = ref<TaskForm>({
  id: -1,
  title: "",
  content: "",
  taskTime: "",//dayjs().format("YYYY-MM-DD HH:mm:"),
  completed: 0,
  estimatedDuration: 1,
  type: "学习",
});




let date1 =  ref(dayjs(taskState.selectedDate).format("YYYY-MM-DD"));
let date2 =  ref();

taskForm.value.taskTime = dayjs(taskState.selectedDate).format("YYYY-MM-DD") +" "+ dayjs(date2.value).format("HH:mm:ss")
let LayOutSettingStore = userLayOutSettingStore();
const submitForm = async  () => {
  try {
   await  reTaskadd(taskForm.value);

    taskState.closeDialog();
    taskState.getTaskList(); // 刷新任务列表

  } catch (error) {
    taskState.closeDialog();
  }finally{
    taskState.getTaskList(); 
    setTimeout(() => {
    //location.reload()
    LayOutSettingStore.refsh = !LayOutSettingStore.refsh;
    }, 100);
  }
};
</script>

<template>
  <el-dialog
    v-model="showDialog"
    title="添加新任务"
    @closed="handleDialogClose()"
  >
    <el-form :model="taskForm" label-width="120px">
      <el-form-item label="任务标题" required>
        <el-input v-model="taskForm.title" placeholder="请输入任务标题" />
      </el-form-item>

      <el-form-item label="任务类型" required>
        <el-select
          v-model="taskForm.type"
          placeholder="请选择任务类型"
          style="width: 100%"
        >
          <el-option
            v-for="option in taskTypeOptions"
            :key="option.label"
            :label="option.label"
            :value="option.label"
          />
        </el-select>

        <el-input
          v-if="!['学习', '工作', '娱乐', '运动'].includes(taskForm.type)"
          v-model="taskForm.type"
          placeholder="请输入自定义类型"
          style="margin-top: 10px"
        />
      </el-form-item>

      <el-form-item label="任务内容">
        <el-input
          v-model="taskForm.content"
          type="textarea"
          :rows="3"
          placeholder="请输入任务详细内容"
        />
      </el-form-item>


      <el-form-item label="任务时间" required>
        <el-col :span="11">
          <el-form-item prop="taskForm.taskTime">
            <el-date-picker
              v-model="date1"
              value-format="YYYY-MM-DD "
              type="date"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col class="text-center" :span="2">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
            <el-time-picker
               v-model="date2"
              style="width: 100%"
            />
        </el-col>
      </el-form-item>

      <el-form-item label="预计时长" required>
        <el-input-number
          v-model="taskForm.estimatedDuration"
          :min="0.5"
          :max="24"
          :step="0.5"
          controls-position="right"
        />
        <span class="duration-unit">小时</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="taskState.closeDialog">取消</el-button>
      <el-button type="primary" @click="submitForm">确认</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
